<template>
  <div class="main">
    <div class="body">
      <div class="add">
        <div class="bodyinfo">
          <div class="infoadd">考勤管理</div>

          <div class="buttons">
            <div>
              <el-button @click="dialogFormVisible = true">考勤</el-button>
            </div>
          </div>
          <!-- 添加弹框 -->
          <el-dialog title="添加教室" v-model="dialogFormVisible">
            <el-form :model="formdata">
              <el-form-item label="教室名称">
                <el-input
                  v-model="form.username"
                  autocomplete="off"
                  style="width: 300px"
                ></el-input>
              </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false"
                  >确 定</el-button
                >
              </span>
            </template>
          </el-dialog>
          <!-- 修改弹框 -->
           <el-dialog title="签到" v-model="dialogFormVisibles">
            <el-form :model="formdata">
              <el-form-item label="修改状态：">
              <el-radio-group v-model="form.checked" >
                <el-radio label="未签到"></el-radio>
                <el-radio label="出勤" class="is-checked"></el-radio>
                <el-radio label="迟到"></el-radio>
                <el-radio label="请假"></el-radio>
                <el-radio label="旷课"></el-radio>
              </el-radio-group>
            </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogFormVisibles = false">取 消</el-button>
                <el-button type="primary" @click="updatedAdd"
                  >修 改</el-button
                >
              </span>
            </template>
          </el-dialog>
          <!-- 弹框end -->
          <div class="infosaa">
            <div class="infosa">
              <div class="infoa">
                <div class="classInfoa">
                  <div class="classInfoas">
                    <input type="text" placeholder="请输入课程名称" />
                  </div>
                  <div class="searcha">
                    <i class="el-icon-search"></i>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div style="margin-left: 20px" @mouseover="info()" @mouseout="hide()">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>

            <el-table-column
              prop="name"
              width="300px"
              label="姓名"
              show-overflow-tooltip
            >
            </el-table-column>
             <el-table-column
              prop="coursename"
              width="300px"
              label="课程名称"
              show-overflow-tooltip
            >
            </el-table-column>
             <el-table-column
              prop="endtime"
              width="300px"
              label="签到时间"
              show-overflow-tooltip
            >
            </el-table-column>
             <el-table-column
              prop="classrooms"
              width="300px"
              label="班级名称"
              show-overflow-tooltip
            >
            </el-table-column>
             <el-table-column
              prop="checked"
              width="300px"
              label="签到状态"
              show-overflow-tooltip
            >
            </el-table-column>
            <el-table-column width="300px" label="操作" show-overflow-tooltip>
              <template #default="scope">
                <div v-show="showa == 1">
                  <el-button type="primary" round size="mini" @click="dialogFormVisibles = true;updated(scope.row.id)">签到</el-button>
                
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfos.page"
            :page-sizes="[5, 10, 30, 50]"
            :page-size="queryInfos.psize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
export default defineComponent({
  data() {
    return {
     
      // 分页
      queryInfos: {
        page: 1,
        psize: 5,
      },
      // 操作默认值
      showa: "2",
      //  首页搜索
      classInfoas: "",
      dialogFormVisible: false,
      dialogFormVisibles:false,
      form: {
        checked: 0,
      },
      // 总页数
      total: 0,
      formdata: {
        username: "",
      },
      input3: ref(""),
      select: ref(""),
      tableData: [],
      multipleSelection: [],
      formInline: {
        user: "",
        region: "",
      },
      urriculumInfos: [],
    };
  },
  created() {
    this.getItemList();
    // 班级搜索下拉
    this.urriculumInfo();
  },
  methods: {
     // 修改状态
      updated(id){
         this.form.id = id
         this.tableData.forEach((item) => {
           console.log(item)
          if(id == item.id){
            this.form.checked = item.checkedName
          }
         })
         console.log(this.form)
      },
    // 分页
    handleSizeChange(val) {
      this.queryInfos.psize = val;
      this.getItemList();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryInfos.page = val;
      this.getItemList();
      // console.log(`当前页: ${val}`);
    },
    // 控制操作按钮的显示跟隐藏
    info() {
      const self = this;
      self.showa = "1";
    },
    hide() {
      const self = this;
      self.showa = "2";
    },
    async updatedAdd(){
      const form = this.form
       const { data: res } = await this.$http.post(
        "http://www.eshareedu.cn/edusystems/api/coursetables/updateState",{params : {form}}
      
      );
      console.log(res)
        // if(res.errCode == 10000){
        //     this.$message.success('修改成功')
        // }
    },
    // 班级搜索下拉
    async urriculumInfo() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/courses/list"
      );
      this.urriculumInfos = res.data.list;
    },
    //  获取考勤列表
    async getItemList() {
      const { data: res } = await this.$http.get(
        "http://www.eshareedu.cn/edusystems/api/coursetables/checked",
        this.queryInfos
      );
      this.tableData = res.data.list;
      this.total = res.data.counts;
      console.log(res);
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
});
</script>
<style>
.body {
  display: flex;
}

.bodyinfo {
  width: 100%;
  height: 50px;
  display: flex;
  padding: 0;
  background-color: rgb(247, 246, 248);
}
.buttons {
  line-height: 50px;
  width: 150px;
  height: 50px;
  display: flex;
  justify-content: space-around;
}
.infoadd {
  width: 100px;
  height: 50px;
  background-color: rgb(246, 249, 250);
  text-align: center;
  line-height: 50px;
  font-size: 16px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}

.block {
  margin-left: 15px;
}
.active {
  background: #fd7522;
  border: 1px solid #fd7522;
  color: #fff;
}
.infosa {
  width: 25%;
}
.classInfoa {
  margin-left: 2%;
  height: 30px;
  display: flex;
  line-height: 30px;
  /* align-items: center; */
  border: 1px solid #ccc;
  background-color: #fff;
}
.classInfoa div:nth-child(2) {
  line-height: 30px;
}

.searcha {
  width: 30px;
  height: 30px;
  font-size: 20px;
  cursor: pointer;
  line-height: 30px;
}
.infoa {
  display: flex;
  flex-direction: row;
  width: 450px;
  align-items: center;
  margin-top: 10px;
  margin-left: 30px;
}
.infosaa {
  width: 25%;
}
.classInfoas input {
  padding-left: 10px;
}
</style>